<!--
	这里是卡片组件，在教师课程列表的每个课程卡片
-->
<template>
	<div class="course-list-item-box">
		<!-- 照片 start -->
		<div class="item-img">
			<img src="@/assets/images/course1.jpg" alt="">
		</div>
		<!-- 照片 end -->
		<!-- 内容 start -->
		<div class="item-content">
			<p class="title">
				<span>{{course.name}}</span>
			</p>
			<p class="course-id">课程编号：<span>{{course.id}}</span></p>
			<p class="teacher-name">主讲教师：<span>{{course.teacherList[0].name}}</span></p>
			<el-divider style="width: 85%; margin: 0 auto;"> </el-divider>
			<div class="link" @click="courseInfo">
				进入课程
			</div>
		</div>
		<!-- 内容 start -->
	</div>
</template>

<script>
import router from "@/router";

export default {
	name: "CourseCardItem",
	props:["course"],
	data(){
		return {
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
		}
	},
	methods:{
		courseInfo(){
			this.teacherInfoData.thisEditCourse=this.course;
			this.$router.push({
				path: '/teacher/courseInfo',
			});
		}
	},
	mounted() {

	},
}
</script>

<style lang="scss" scoped>
.course-list-item-box{
	width: 270px;
	background: #FCFCFC;
	margin: 15px 10px 5px 5px;
	padding-bottom: 15px;
	border-bottom: 1px solid #efefef;
	border-radius: 8px;
	overflow: hidden;
	&:hover{
		// 阴影
		box-shadow: 0 2px 4px rgba(0,0,0,0.12),0 0 6px rgba(0,0,0,0.04);
	}
	img{
		width: 270px;
		height: 153px;
		&:hover{
			cursor: pointer;
		}
	}
	.item-content{
		margin-top: 10px;
		padding-left: 1px;
		// span的marginLeft值
		$spanMarginLeft:10px;
		p{
			margin-top: 5px;
		}
		p.title{
			font-size: 18px;
			font-weight: bold;
			line-height: 30px;
			color: #333;
			img{
				width: 27px;
				height: 11px;
				margin-left: $spanMarginLeft;
			}
			&:hover{
				cursor: pointer;
			}
		}
		p.course-id,p.teacher-name{
			margin: 10px 0 10px 0;
			font-size: 14px;
			color: #030;
			line-height: 20px;
			span{
				margin-left: $spanMarginLeft;
			}
		}
		.link{
			margin-top: 20px;
			display: flex;
			justify-content: center;
			cursor: pointer;
			&:hover{
				color: #409EFF;
				font-weight: bold;
			}
		}
	}
}
</style>